<!--@Knockout-->
<div data-bind="dxTileView: {
    dataSource: tiles,
    baseItemHeight: 50,
    baseItemWidth: 50,
    height: 250,
    itemMargin: margin
}">
    <div class="tile" data-options="dxTemplate:{ name:'item'}">
        <p data-bind="text:id"></p>
    </div>
</div>
<div class="dx-fieldset">
    <div class="dx-field">
        <p>itemMargin = <span data-bind="text: margin"></span></p>
        <div data-bind="dxSlider: {
            min: 0,
            max: 50,
            value: margin
        }"></div>
    </div>
</div>
<!--/@Knockout-->
<!--@AngularJS-->
<div ng-controller="demoController" style="height:100%;">
    <div dx-tile-view="{
        dataSource: tiles,
        baseItemHeight: 50,
        baseItemWidth: 50,
        height: 250,
        bindingOptions: {
            itemMargin: 'margin'
        }
    }" dx-item-alias="itemObj">
        <div class="tile" data-options="dxTemplate:{ name:'item'}">
            <p>{{itemObj.id}}</p>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <p>itemMargin = {{margin}}</p>
            <div ng-model="margin" dx-slider="{
                min: 0,
                max: 50
            }"></div>
        </div>
    </div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div id="myTileView"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <p>itemMargin = <span id="marginValue"></span></p>
        <div id="marginSlider"></div>
    </div>
</div>
<!--/@jQuery-->